<template>
  <view>
    <!-- 搜索框组件 -->
    <view class="search-box">
      <my-search @click="goToSearch"></my-search>
    </view>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{ height: wh + 'px' }">
        <!-- 一级分类 -->
        <block v-for="(item, index) in cateList" :key="item.cat_id">
          <view @click="activeChange(index)" class="left-scroll-view-item" :class="{ active: index === activeIndex }">{{ item.cat_name }}</view>
        </block>
      </scroll-view>
      <!-- 右侧的滚动视图区域 -->
      <scroll-view class="right-scroll-view" scroll-y :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
        <!-- 二级分类开始 -->
        <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="item2.cat_id">
          <view class="cate-lv2-title">/ {{ item2.cat_name }} /</view>
          <!-- 三级分类的开始-->
          <view class="cate-lv3-list">
            <!-- 三级分类 Item 项 -->
            <view @click="gotoGoodsList(item3.cat_id)" class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="item3.cat_id">
              <!-- 图片 -->
              <image :src="item3.cat_icon"></image>
              <!-- 文本 -->
              <text>{{ item3.cat_name }}</text>
            </view>
          </view>
          <!-- 三级分类的结束 -->
        </view>
        <!-- 二级分类结束 -->
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getCateList } from '../../api/cate';
import setBadge from '@/mixins/tabbar-badge.js';
export default {
  mixins: [setBadge],
  data() {
    return {
      // scroll-view滑块的高度：
      // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
      wh: 0,
      // 分类列表数据
      cateList: [],
      // 默认激活的一级分类的下标
      activeIndex: 0,
      // 二级分类数据
      cateLevel2: [],
      // 右侧scroll-view竖向滚动条位置
      scrollTop: 0
    };
  },
  async onLoad() {
    // 获取当前系统的信息
    const sysInfo = uni.getSystemInfoSync();
    // 为 wh 窗口可用高度动态赋值=屏幕高度 - navigationBar高度 - tabBar 高度 - 搜索框组件的高度
    this.wh = sysInfo.windowHeight - 50;
    // 获取分类数据
    await this.getCateList();
    // 给二级分类数据设置初始数据
    this.cateLevel2 = this.cateList[0].children;
  },
  methods: {
    // 获取分类列表数据
    async getCateList() {
      this.cateList = await getCateList();
      // 小程序上线有严格的要求：食品、酒水、金融(金融资质)等需要严格限制，我们的分类接口中有酒水和食品，为了能够正常的上线，先排除掉该数据
      this.cateList = this.cateList.filter((item) => item.cat_id != 356);
    },
    // 点击一级分类时进行切换
    activeChange(index) {
      // 让 scrollTop 的值在 0 与 1 之间切换
      this.scrollTop = this.scrollTop === 0 ? 1 : 0;
      // 改变激活时的下标
      this.activeIndex = index;
      // 重新获取二级分类数据
      this.cateLevel2 = this.cateList[index].children;
    },
    // 点击三级分类去往商品列表页
    gotoGoodsList(cat_id) {
      uni.navigateTo({
        url: `/subpkg/goods_list/goods_list?cid=${cat_id}`
      });
    },
    goToSearch() {
      uni.navigateTo({
        url: '/subpkg/search/search'
      });
    }
  }
};
</script>

<style lang="scss">
// 搜索
.search-box {
  // 设置吸顶效果，并不脱标，所以不用设置宽度
  position: sticky;
  top: 0;
  // 设置层级比轮播图的层级高
  z-index: 1000;
}
.scroll-view-container {
  display: flex;
  // 左侧：一级分类
  .left-scroll-view {
    width: 120px;

    .left-scroll-view-item {
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 12px;

      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;

        // 渲染激活项左侧的红色指示边线
        &::before {
          content: ' ';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  // 右侧：二、三级分类
  .right-scroll-view {
    // 二级分类标题
    .cate-lv2-title {
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      padding: 15px 0;
    }
    // 三级分类
    .cate-lv3-list {
      display: flex;
      flex-wrap: wrap;
      .cate-lv3-item {
        width: 33.33%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 60px;
          height: 60px;
        }

        text {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
